// -------------------------- 获取分类，处理下拉框 ----------------------------
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    // console.log(res);
    if (res.status === 0) {
      let str = '';
      res.data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`;
      });
      $('select[name=cate_id]').append(str);
      // 动态创建的 下拉框、单项按钮、复选按钮，需要更新渲染
      let form = layui.form;
      // form.render('select', '表单的lay-filter属性的值');
      form.render('select');
    }
  }
});

// ----------------------------- 使用富文本编辑器 --------------------------
// tinymce.init({
//   selector: 'textarea',
//   height: 400,
//   width: 600,
//   // 这里可以填大量的配置项
// });
initEditor();


// ----------------------------- 封面图片处理 ----------------------------
// ----------------------------- 初始化剪裁框-----------------------------------
let image = $('#image');
let option = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
image.cropper(option);


// ----------------------------- 点击 上传 能够触发文件域的单击事件 ------------------
// button:contains("标签的内容")  ---- 查找包含“内容”的标签
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
})

// ----------------------------- 更换剪裁区的图片 -----------------------------------
$('#file').on('change', function () {
  // console.dir(this);
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    image.cropper('replace', url);
  }
})



// ---------------------------------
// ---------- 上面是处理页面 ----------
// ---------------------------------




// 先抛开插件的使用，直接添加
// 1. 自己手动修改几个分类      2. 文章封面，自己加一个文件域      3. 把各项的 name 属性修改成和接口要求的参数名一致
$('form').on('submit', function (e) {
  e.preventDefault();
  let fd = new FormData(this);  // 收集到的数据只有 title、cate_id、state正常
  // 单独处理 content
  fd.set('content', tinyMCE.activeEditor.getContent());

  // 剪裁图片，把剪裁后的结果加到fd中
  let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
  // 通过 toBlob 方法可以把canvas转成 Blob 对象的格式
  canvas.toBlob(function (blob) {
    // 参数blob就是转换后的结果，我们把这个结果加到fd中
    fd.append('cover_img', blob);
    // 检查FormData对象中的数据，直接输入 fd 是看不到数据的，需要通过 forEach 遍历查看fd中的数据
    // fd.forEach((value, key) => {
    //   console.log(key, value);
    // });
    $.ajax({
      url: '/my/article/add',
      type: 'POST',
      data: fd,
      contentType: false,
      processData: false,
      success: function (res) {
        // console.log(res);
        if (res.status === 0) {
          layer.msg(res.message, { time: 1500 }, function () {
            // 提示1.5s后，跳转到文章列表页
            location.href = './list.html';
          })
        }
      }
    });
  });


})